<template>
	<view class="container">
		<view class="header">
			<view class="arrow" @tap="$back()"><image src="../../static/images/arrow_left.png" mode="aspectFit"></image></view>
			<view class="text f36 cfff">订单详情</view>
			<view class="btn"><view class="define f30">打印</view></view>
		</view>

		<view class="order-info">
			<view class="order-item">
				<view class="order-top">
					<view class="orderNum f30 c333">订单号：1523453536557</view>
					<view class="ding f28 cfff">订</view>
				</view>
				<view class="order-bottom">
					<view class="left">
						<view class="pic"><image src="../../static/images/201916541220.jpg" mode="aspectFit"></image></view>
						<view class="text">
							<view class="name f30 c333">亦媛（总欠款：¥-7.88）</view>
							<view class="phone f28 c666">18565211111</view>
						</view>
					</view>
					<view class="right"><view class="collectBtn f30 cfff">收款</view></view>
				</view>
			</view>
		</view>

		<view class="address-Select">
			<view class="name f32 c333">地址：江苏省徐州市某某某区</view>
			<view class="arrow"><image src="../../static/images/arrow_right.png" mode="aspectFit"></image></view>
		</view>
		<view class="billing-box">
			<view class="info">
				<view class="people f32 c333">开单人：某某</view>
				<view class="time f28 c666">2020-03-23 19:33:54</view>
			</view>
			<view class="price f30 c333">
				订单金额：¥112.0
				<text>(已优惠88.0元）</text>
			</view>
		</view>
		<view class="resultsContent">
			
			<view class="title">
				<view class="name f30">总要货：99 <text>（总欠货：22）</text></view>
				<view class="arrow">
					<text class="f28">统一展开</text>
					<image src="../../static/images/arrow_down.png" mode="aspectFit"></image>
				</view>
			</view>
			
			
			<view class="results-li" v-for="(item, index) in list" :key="index">
				<view class="dropInfo">
					<view class="left nowrap">
						<view class="pic"><image src="../../static/images/201916541220.jpg" mode="aspectFit"></image></view>
						<view class="text">
							<view class="name f30 c333">{{ item.name }}</view>
							<view class="stock">
								<view class="f32 c333">要货：2（¥112.00）</view>
							</view>
						</view>
					</view>
					<view class="right nowrap tRight">
						<view class="surplus f30 c666">欠货：22</view>
						<view class="arrow" @click.stop="changeImg(index)">
							<view class="f28" v-show="item.isok">收起</view>
							<view class="f28" v-show="!item.isok">展开</view>
							<image src="../../static/images/arrow_down.png" mode="aspectFit" v-show="!item.isok"></image>
							<image src="../../static/images/arrow_ondown.png" mode="aspectFit" v-show="item.isok"></image>
						</view>
					</view>
				</view>
		
				<view class="dropBox" v-show="item.isok">
					<view class="drop-item">
						<view class="tit">
							<view class="f28 c333">规格(库存）</view>
							<view class="f28 c333">采购数(价格）</view>
							<view class="f28 c333">为入库数</view>
						</view>
						<view class="list">
							<view class="f28 c333">尺寸</view>
							<view class="f28 c333">2(78.0)</view>
							<view class="f28 c333">2</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="address-Select">
			<view class="name f32 c333">订单操作记录</view>
			<view class="arrow"><image src="../../static/images/arrow_right.png" mode="aspectFit"></image></view>
		</view>

		<view class="remark">
			<view class="left">
				<view class="name f32 c333">备注</view>
				<input value="" placeholder="备注信息" />
			</view>

			<view class="arrow"><image src="../../static/images/arrow_right.png" mode="aspectFit"></image></view>
		</view>

		<view style="height: 200upx;"></view>
		<view class="fiexd-bottom">
			<view class="item f30 c666">
				<image src="../../static/images/202014570420.png" mode="aspectFit"></image>
				退欠货
			</view>
			<view class="item f30 c666">
				<image src="../../static/images/202014590420.png" mode="aspectFit"></image>
				再来一单
			</view>
			<view class="item f30 c666">
				<image src="../../static/images/202015000420.png" mode="aspectFit"></image>
				发货
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: '',
			showBox: true,
		};
	},
	onLoad() {
		this.list=[
				{name:'3542763(商品名称）'},
				{name:'3542763(商品名称）'}
			]
		this.list.map((item, index) => {
			console.log(index);
			this.list[index].isok = false;
		});
	},
	methods:{
		changeImg(index) {
			this.showBox=!this.showBox
			let list = this.list;
			list[index].isok = !list[index].isok;
			this.list = list;
			this.$set(this.list, index, list[index]);
		},
	}
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}
.header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: #249af6;
	padding: 60upx 30upx 25upx 30upx;
	text-align: center;

	.arrow {
		image {
			width: 20upx;
			height: 40upx;
		}
	}

	.btn {
		display: flex;
		flex-direction: row;
		color: #fff;

		.define {
			margin-left: 30upx;
		}
	}
}
.order-info {
	margin-top: 30upx;
	background-color: $white-background;
	padding: 40upx 0 30upx;
	.order-item {
		.order-top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 2upx #eeeeee solid;
			padding: 0 30upx 30upx;
			.ding {
				width: 40upx;
				height: 40upx;
				background: rgba(36, 154, 246, 1);
				border-radius: 5upx;
				text-align: center;
			}
		}
		.order-bottom {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin-top: 30upx;
			padding: 0 30upx;
			.left {
				display: flex;
				flex-direction: row;
				.pic {
					image {
						width: 100upx;
						height: 100upx;
						border-radius: 50%;
						margin-right: 30upx;
					}
				}
				.text {
					.name {
						margin-bottom: 25upx;
					}
				}
			}
			.right {
				.collectBtn {
					width: 105upx;
					height: 55upx;
					line-height: 55upx;
					text-align: center;
					background: rgba(36, 154, 246, 1);
					border-radius: 5upx;
				}
			}
		}
	}
}
.address-Select {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background-color: $white-background;
	margin: 20upx 0;
	padding: 35upx 30upx;
	.name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.arrow {
		margin-left: 30upx;
		image {
			width: 20upx;
			height: 35upx;
		}
	}
}

.billing-box {
	background-color: $white-background;
	padding: 35upx 30upx;
	.info {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.price {
		padding-top: 20upx;
		text {
			color: #f64444;
		}
	}
}

.resultsContent {
	margin-top: 20upx;
	background-color: $white-background;
	padding: 35upx 30upx 0 30upx;
	.title{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		.name{
			text{
				color: #F64444;
			}
		}
		.arrow{
			text{
				color: #249AF6;
			}
			image{
				width: 20upx;
				height: 35upx;
				margin-left: 20upx;
				vertical-align: middle;
			}
		}
	}
	.results-li {
		.dropInfo {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 40upx 30upx 35upx 30upx;
			background-color: $white-background;
			border-bottom: 2upx #eee solid;	
			.left {
				display: flex;
				flex-direction: row;
				.pic {
					image {
						width: 130upx;
						height: 130upx;
						margin-right: 30upx;
					}
				}

				.text {
					.name {
						padding: 20upx 0;
					}

					.stock {
						view {
							&:first-child {
								padding-bottom: 6upx;
							}
						}
					}
				}
			}

			.right {
				padding-top: 20upx;

				.arrow {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 35upx;
					display: flex;
					justify-content: flex-end;
                     .f28{
						 color: #249AF6;
						 }
					image {
						width: 25upx;
						height: 15upx;
						margin-left: 20upx;
					}
				}

			
			}
		}

		.dropBox {
			.drop-item {
				background-color: #eee;
				border-bottom: 2upx #ddd solid;
				.tit {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;
					padding: 30upx 0;
					view {
						width: 25%;
					}
				}
				.list {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;
					padding: 0 0 30upx 0;
					view {
						width: 25%;
					}
				}
				&:last-child {
					border-bottom: none;
				}
				view {
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
}
.remark {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background-color: $white-background;
	height: 100upx;
	line-height: 100upx;
	padding: 0 30upx;
	box-sizing: border-box;
	.left{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100upx;
		input{
			width: 70%;
			margin-left: 100upx;
		}
	}
	.arrow {
		image {
			width: 20upx;
			height: 40upx;
		}
	}
}
.fiexd-bottom {
	width: 100%;
	height: 110upx;
	position: fixed;
	bottom: 0;
	background-color: $white-background;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	.item {
		image {
			width: 44upx;
			height: 44upx;
			margin: 0 20upx 8upx 0;
			vertical-align: middle;
		}
		&:nth-child(2) {
			image {
				width: 44upx;
				height: 42upx;
			}
		}
		&:nth-child(3) {
			image {
				width: 48upx;
				height: 42upx;
			}
		}
	}
}
</style>
